<template>
    <div>


        <!-- vant搜索 -->
        <van-search action-text="Cancel" @search="onSearch" show-action shape="round" v-model="kw "
            placeholder="please enter search keywords">

            <template>
                <van-icon @click="back" style="margin-right: 5px;" size="22px"></van-icon>
            </template>



        </van-search>

        <van-tabs type="line" :border="true" line-width="13px" color="rgb(181, 79, 255)"
            title-inactive-color="rgb(132, 132, 132)" title-active-color="black" v-model="activeName">
            <van-tab title="Novel" name="a">
                <div v-show="isShow">
                    <div style="display:flex; justify-content: space-between; align-items: center;">
                        <p v-show="saveList.length > 0"
                            style=" display: inline-block;font-weight: 800;font-size: 0.6rem;">
                            Search history
                        </p>
                        <div>
                            <van-icon v-show="saveList.length > 0" size="18px" name="delete"><span @click="onDel"
                                    v-show="hide">编辑</span><span @click="wancheng" v-show="!hide">完成</span></van-icon>
                        </div>
                    </div>

                    <div class="buju">
                        <div v-for="(item, index) in saveList" :key="index + 'a'"><span>{{ item }}</span>
                            <van-icon @click="dele(index)" v-show="!hide" size="0.5rem" name="close" color="#ccc" />
                        </div>
                    </div>
                </div>

                <van-list style="height:600px" v-model:loading="loading" :finished="finished" finished-text="No more"
              @load="onLoad">

              <!-- <CardBook v-for="item in novelslist.length" :key="item"></CardBook> -->
              <CardBook  v-for="  ( item , index )  in novelslist"  :novelitem="item"   :key="item.id"   />

            </van-list>


            </van-tab>
            <!-- <van-tab title="Audio" name="b">内容 2</van-tab>
            <van-tab title="Comic" name="c">
                <div class="result">
                    <h3>Sorry!</h3>
                    <p>No results were found.</p>
                </div>

            </van-tab> -->
        </van-tabs>

        <!-- 搜索记录 -->


        <!-- 搜索提示 -->



    </div>


</template>
<script>
import  {week} from '@/api/home'
export default {
    data() {
        return {
            kw: '',
            isShow: false,
            list: [], //所有数据
            saveList: [], //搜索记录的数据
            hide: true,
            activeName: 'b',
            novelslist:[],
            finished:true,
            loading:false,
            page:1,
            size:20,
            keyWord:""
        }
    },

    methods: {
        wancheng() {
            this.hide = true
        },

        dele(index) {

            var data = this.saveList


            this.saveList = data.reduce((a, b) => {

                if (b == data[index]) {

                } else {
                    a.push(b)
                }
                console.log(a);
                return a
            }, [])
            console.log(this.saveList, '剩余结果');
            localStorage.setItem('saveList', JSON.stringify(this.saveList))


        },
        back() { //返回上一级
            window.history.back()
        },
     async   onSearch(val) { //点击enter和点击搜索时触发
            console.log('1111', this.saveList);
            this.keyWord = val
            this.finished = false 
            //  发送请求加载页面
            this.loading =true
            this.page =1
            this.novelslist=[]
            let result    =  await week({ 
                page:this.page,
                size:this.size,
                keyWord:val
            })
            this.novelslist = result.data.list
            this.loading =false



            // this.$router.push({ //点击跳转到列表页，并把输入的值传过去
            //     path: '/login',
            //     query: {
            //         kw: val
            //     }
            // })

            if (!this.saveList.includes(val.trim())) { //判断是否重复添加相同记录
                this.saveList.push(val) //把搜索的值添加到搜索记录
                localStorage.saveList = JSON.stringify(this.saveList)
            }

        },
     async   onLoad(){
            this.loading =true
            this.page++
            let result    =  await week({ 
                page:this.page,
                size:this.size,
                keyWord:this.keyWord
            })
            if(result.data.list <this.size){
                    this.loading =false
                    this.finished = true 
            }
            this.novelslist = this.novelslist.concat(result.data.list)
            this.loading =false

        },

        onDel() { //删除

            this.hide = false

            //    this.saveList = []
            //    localStorage.saveList = JSON.stringify(this.saveList)
        },

    },


    created() {

        let saveList = localStorage.saveList
        if (saveList) {
            this.saveList = JSON.parse(saveList)
        }


    },
    mounted() {

    },

}
</script>
<style lang="scss" scope="">
* {
    padding: 0;
    margin: 0;
}

.buju {
    width: 80vw;
    margin: auto;
    display: flex;
    justify-content: space-around;

    flex-wrap: wrap;


    span {
        font-size: 0.5rem;
        background-color: rgb(255, 255, 255);
        padding: 4px 6px;
        border-radius: 20px;
    }
}

.result {

    width: 80vw;
    height: 100px;
    margin: auto;
    margin-top: 30px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;

    h3 {
        font-size: 0.65rem;
        width: 45vw;
        height: 30px;
    }

    p {
        font-size: 0.55rem;
        height: 30px;
    }
}
</style>